<template>
	<view class="content">
		<view class="back_img">
			<view class="img_rou">
				<img src="../../static/路线.jpg" alt="" style="width: 100%;" />
			</view>
			<view class="circle">
				<p class="today">里程</p>
				<p class="numb1">Go</p>
			</view>
		</view>
		<view class="line">
			<p>路线图</p> 
		</view>
		<view class="list7">
			<view class="top_1 flex">
				<view class="sd">
					<p>累计行走里程</p>
					<p class="font_i">0里</p>
				</view>
				<view class="sd">
					<p>累计行走天数</p>
					<p class="font_i">0</p>
				</view>
				<view class="sd">
					<p>排名</p>
					<p class="font_i">未上榜</p>
				</view>
			</view>
			<view class="top_1 flex">
				<view class="sd">
					<p>兑换比例</p>
					<p class="font_i">4.00++1里</p>
				</view>
				<view class="sd">
					<p>今日兑换步数</p>
					<p class="font_i">0</p>
				</view>
				<view class="sd">
					<p>可兑换步数</p>
					<p class="font_i">2622</p>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
</script>

<style>
	.flex{display: flex;justify-content: space-around;}
	.back_img{position: relative;}
	.circle {
		width: 6rem;
		height: 6rem;
		border: lightpink 0.5rem solid;
		background-color: lightpink;
		border-radius: 50%;
		text-align: center;
		position: absolute;
		bottom: -110rpx;
		left: 33%;
	}
	
	.circle p {
		font-size: 1.1rem;
		margin-top: 15px;
		color: aliceblue;
		
	}
	.line{margin-top: 80px;margin-left: 20px;}
	.line p{font-weight: bold;}
	.top_1{margin-top: 20px;text-align: center;}
	.font_i{font-size: 30rpx;margin-top: 10px;}
</style>